<template>
	<view class="announce">
		<view class="nav-list u-flex u-row-between">
			<view class="item" @click="sendUrl(1)">通告管理1</view>
			<view class="item" @click="sendUrl(2)">通告管理2</view>
		</view>
		<view>
			<u-tabs-swiper  :list="list" ref="tabs" :height="100" :is-scroll="false" :bold="false" :current="current" @change="tabsChange" active-color="#de4f38" :bar-width="80" :bar-height="6"></u-tabs-swiper >
		</view>
		<view class="announce-tit">还有100条待您审核的任务，请及时处理></view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box" >
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<AnnounceList :list="talentList" @clickFun="send"></AnnounceList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<AnnounceList :list="talentList"></AnnounceList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<AnnounceList :list="talentList"></AnnounceList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<AnnounceList :list="talentList"></AnnounceList>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast" />
		<u-modal
		v-model="modelShow" 
		width="548"
		:show-title="false"
		show-cancel-button
		border-radius="20"
		cancel-color="#999999"
		confirm-color="#171717"
		confirm="Sample"
		:content="modelContent">
		</u-modal>
			
	</view>
</template>

<script>
	import AnnounceList from '../components/announce-list/index.vue'
	export default {
		components: {
			AnnounceList
		},
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待开始'
				}, {
					name: '进行中'
				}, {
					name: '已结束'
				}],
				current: 0,
				swiperCurrent: 0, 
				talentList: [
					{
						id: 1,
						title: '名字名字',
						url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
						fans_num: '6.8',
						price: '500',
						location: '杭州'
					},
					{
						id: 2,
						title: '名字名字',
						url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
						fans_num: '6.8',
						price: '500',
						location: '杭州'
					}
				],
				modelShow: false,
				modelShow1:false,
				modelContent: '确认取消该通告吗?',
				modelContent1:'',
				order:false,
			};
		},
		methods: {
			sendUrl(num){
				switch(num) {
				    case 1:
						uni.navigateTo({
							url: '/pages/mine/announce/list1',
						})
				        break;
				    default:
					uni.navigateTo({
						url: '/pages/mine/announce/list2',
					})
				} 
			},
			send(e,item){
				console.log(e,item);
				let that = this;
				switch(e) {
				    case 'cancel':
						uni.navigateTo({
							url: '/pages/mine/announce/cancelAnnounce',
						})
				        break;
				    case 'contact':
						uni.navigateTo({
							url: '/pages/mine/announce/announce?id='+1,
						})
				        break;
				    default:
					that.modelContent = '';
					that.order = true;
					that.modelShow1 = true
				} 
			},
			Sample(e){
				console.log(e)
			},
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onreachBottom() {
				
			}
		}
	};
</script>

<style lang="scss" scoped>
.announce {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	.nav-list{
		margin: 40rpx 0;
		padding: 0 30rpx 0 60rpx;
		.item{
			text-align: center;
			flex:1;
			height: 80rpx;
			line-height: 80rpx;
			background-color: rgb(222, 79, 56);
			color: #fff;
			margin-right: 30rpx;
		}
	}
	
	&-tit{
		margin-top: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		color:#DE4F38 ;
		background-color: #fad7d2;
		text-align: center;
	}
	
	.swiper-box {
		flex: 1;
		.swiper-item {
			height: 100%;
		}
	}
}
</style>
